<style scoped>
@import url(../../style/page/ldwq.css);
</style>
<template>
  <div class="mian">
    <div class="left_box">
      <div class="box_con box1">
        <div class="title_box">汇聚环比增量</div>
        <div class="echart_box">
          <avue-echart-polarPie :data="hjhbzl.data" :option="hjhbzl.option"></avue-echart-polarPie>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">近6个月新增和解除合同趋势</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="xzhjhtqs.data"
            :option="xzhjhtqs.option"
            :unit="xzhjhtqs.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">数据质量分析</div>
        <div class="echart_box">
          <div style="height: 50%">
            <avue-echart-normalPie
              :data="sjzlfx1.data"
              :option="sjzlfx1.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
          </div>
          <div style="height: 50%">
            <avue-echart-normalPie
              :data="sjzlfx2.data"
              :option="sjzlfx2.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
          </div>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
         <div class="echart_box map_box">
         <avue-echart-mapPng :jsonUrl="mapDatas.jsonUrl" :imgUrl="mapDatas.imgUrl" :data="mapDatas.data"></avue-echart-mapPng>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
         <div class="echart_box" style="display:flex">
         <div  style="width:51%;height:100%">
               <avue-echart-normalPie
              :data="dqldhthjl.data"
              :option="dqldhthjl.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
         </div>
          <div style="width:49%;height:100%">
               <avue-echart-normalPie
              :data="dqldhthjl2.data"
              :option="dqldhthjl.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
         </div>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">地区数据完整率排名</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="dqsjwzl.data"
            :option="dqsjwzl.option"
            :unit="dqsjwzl.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
    </div>
    <div class="right_box">
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
        <div class="echart_box table_box">
         <com-table :pageSize="tableData.pageSize" :tableClass="tableData.tableClass"  :columns="tableData.columns"  :isBorder="tableData.isBorder"  :datas="tableData.data"></com-table>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">按行业新签和解除合同排名</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="ahyxqhjchtphb.data"
            :option="ahyxqhjchtphb.option"
            :unit="ahyxqhjchtphb.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">数据完整率分析</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="sjwzfx.data"
            :option="sjwzfx.option"
            :unit="sjwzfx.unit || ''"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { adaptePX } from "@/lib/common";
export default {
  name: "main_ldwq",
  data() {
    return {
      mapDatas:{
        jsonUrl:base_file_url+'public/JSON/mapPng/hz.json',
        imgUrl:base_file_url+'public/img/map_img.png',
        data:[
          {
          name:"临安区",
          value:38.5,
          unit:"%",
          areacode:"330112",
          },{
          name:"主城区",
          value:"10.92",
          unit:"%",
          areacode:"330120",
        },
        {
          name:"淳安县",
          value:"35.4",
          unit:"%",
          areacode:"330127",
        },
        {
          name:"建德市",
          value:"60.28",
          unit:"%",
           areacode:"330182",
        },
        {
          name:"桐庐县",
          value:"30.8",
          unit:"%",
          areacode:"330122",
        },
        {
          name:"富阳区",
          value:"23.2",
          unit:"%",
           areacode:"330111",
        },
         {
          name:"余杭区",
          value:"6.58",
          unit:"%",
           areacode:"330110",
        },
         {
          name:"萧山区",
          value:"15.3",
          unit:"%",
          areacode:"330109"
        },
         {
          name:"钱塘区",
          value:"32.6",
          unit:"%",
          areacode:"330114"
        }]
      },
      hjhbzl:{
        data:[
    {
        "value": 109,
        "name": "主城区"
    },
    {
        "value": -19.8,
        "name": "萧山区"
    },
    {
        "value": 29.6,
        "name": "余杭区"
    },
    {
        "value": -40,
        "name": "富阳区"
    },
    {
        "value": -66.1,
        "name": "临安区"
    },
    {
        "value": 9.8,
        "name": "桐庐县"
    },
    {
        "value": -78.6,
        "name": "建德市"
    },
    {
        "value": -46.3,
        "name": "淳安县"
    }
],
         "option": {
                barColor: [
                  {"color1":"rgba(49, 150, 250, 1)","color2":""},
                  {"color1":"rgba(77, 111, 236, 1)","color2":""},
                  {"color1":"rgba(149, 112, 255, 1)","color2":""},
                  {"color1":"rgba(222, 125, 255, 1)","color2":""},
                  {"color1":"rgba(250, 118, 121, 1)","color2":""},
                  {"color1":"rgba(53, 198, 215, 1)","color2":""},
                  {"color1":"rgba(101, 223, 138, 1)","color2":""},
                  {"color1":"rgba(253, 161, 79, 1)","color2":""}
                ],
                polarRadius: '60%',
                axisSplitLineColor: '#DDDDDD',
                nameFontSize:adaptePX(17),
                nameColor: '#333',
                axisTickNameFontSize: 12,
                axisTickNameColor: '#fff',
                axisLineColor: '#DDDDDD',
                axisLabelShow: true,
                axisTickShow: false,
                labelShowValue:false,
                max:120,
                min:-110,
                "tanc": {
                  "show": true
                },
              },
      },
        tableData:{
        tableClass:["ldht_table"],
        isBorder:false,
        pageSize:4,
         columns:[  
          { field: "prop1", title: "区域",width:60},
          { field: "prop2", title: "在职职工数" },
          { field: "prop3", title: "合同汇聚数" },
          { field: "prop4", title: "网签数",width:70 },
           { field: "prop5", title: "电子化数" }],
          data:[
    {
        "prop1": "上城区",
        "prop2": 530848,
        "prop3": 47377,
        "prop4": 1460,
        "prop5": 45917
    },
    {
        "prop1": "拱墅区",
        "prop2": 566108,
        "prop3": 44593,
        "prop4": 3269,
        "prop5": 41324
    },
    {
        "prop1": "西湖区",
        "prop2": 472117,
        "prop3": 55811,
        "prop4": 6225,
        "prop5": 49586
    },
    {
        "prop1": "滨江区",
        "prop2": 469376,
        "prop3": 19650,
        "prop4": 323,
        "prop5": 19327
    },
    {
        "prop1": "钱塘区",
        "prop2": 324482,
        "prop3": 105843,
        "prop4": 6972,
        "prop5": 98871
    },
    {
        "prop1": "萧山区",
        "prop2": 590934,
        "prop3": 90591,
        "prop4": 8781,
        "prop5": 81810
    },
    {
        "prop1": "余杭区",
        "prop2": 409106,
        "prop3": 26913,
        "prop4": 1800,
        "prop5": 25113
    },
    {
        "prop1": "临平区",
        "prop2": 340894,
        "prop3": 23249,
        "prop4": 1893,
        "prop5": 21356
    },
    {
        "prop1": "富阳区",
        "prop2": 212652,
        "prop3": 49262,
        "prop4": 1574,
        "prop5": 47688
    },
    {
        "prop1": "临安区",
        "prop2": 137746,
        "prop3": 53025,
        "prop4": 823,
        "prop5": 52202
    },
    {
        "prop1": "桐庐区",
        "prop2": 98431,
        "prop3": 30297,
        "prop4": 1061,
        "prop5": 29236
    },
    {
        "prop1": "建德区",
        "prop2": 79438,
        "prop3": 47887,
        "prop4": 2118,
        "prop5": 45769
    },
    {
        "prop1": "淳安区",
        "prop2": 43165,
        "prop3": 15280,
        "prop4": 1062,
        "prop5": 14218
    }
]

        },
         dqldhthjl2:{
             data:[
    {
        "value": 713,
        "name": "20岁及以下"
    },
    {
        "value": 10514,
        "name": "21-30岁"
    },
    {
        "value": 13485,
        "name": "31-40岁"
    },
    {
        "value": 10205,
        "name": "41-50岁"
    },
    {
        "value": 5497,
        "name": "51-60岁"
    },
    {
        "value": 532,
        "name": "60岁以上"
    }
]
         },
        dqldhthjl:{
              data: [
    {
        "value": 11345,
        "name": "制造业"
    },
    {
        "value": 9040,
        "name": "租赁和商务服务"
    },
    {
        "value": 3117,
        "name": "批发和零售业"
    },
    {
        "value": 2183,
        "name": "建筑业"
    },
    {
        "value": 1954,
        "name": "居民服务业"
    },
    {
        "value": 1921,
        "name": "科学和技术服务业"
    }
],
        option: {
          id: "",
          gridX: "4%",
          gridX2: 0,
          gridY:0,
          gridY2: 0,
          colors: ["#5094F5", "#FF714F","#FFCB40","#9E80FF","#FFA144","#3DCCFA"],
          radius: ["25%", "45%"],
          center: ["50%", "37%"],
          nameFontSize:adaptePX(14),
          nameColor: "#333",
          labelShow:true,
          labelFormatter: "{d}%",
          roseType: false,
          legend: true,
          legendShowValueColor: "#1492FF",
          // legendWidth:'80%',
          legendPositionLeft:"10%",
          legendPositionTop: "70%",
          legendOrient: "vertical",
          legendItemGap: 10,
          legendIcon: "rect",
          legendshowFh: true,
          // legendPositionBottom:'0%',
          legendShowPercent:false,
          legendShowValue:false,
          labelLineShow: true,
          labelLineLength:9,
          labelLineLength2: 9,
          //title
          title1: {
            fontSize:12,
            text: "",
             fontcolor: "#333",
             left:"10%",
             top: "40%",
            show:false,
          },
          title2: {
            fontSize: 20,
            fontcolor: "#333",
            top: 10,
            show: false,
          },
          tanc: {
            show: true,
            title: "",
            url: "",
            parme: true,
          },
        },
        },
      sjzlfx1: {
        data: [
          {
            value: 9472245,
            name: "完整信息数",
          },
          {
            value: 3736335,
            name: "缺项信息数",
          },
        ],
        option: {
          id: "",
          gridX: 0,
          gridX2: 0,
          gridY: 0,
          gridY2: 0,
          colors: ["#5094F5", "#FFB253"],
          radius: ["58%", "72%"],
          center: ["20%", "50%"],
         nameFontSize:adaptePX(16),
          nameColor: "#333",
          labelShow: false,
          labelFormatter: "{b}\n{d}%",
          roseType: false,
          legend: true,
          legendShowValueColor: "#1492FF",
          // legendWidth:'80%',
          legendPositionLeft: "38%",
          legendPositionTop: "16%",
          legendOrient: "vertical",
          legendItemGap: 12,
          legendIcon: "rect",
          legendshowFh: true,
          // legendPositionBottom:'0%',
          legendShowPercent: true,
          legendShowValue: true,
          labelLineShow: true,
          labelLineLength: 20,
          labelLineLength2: 10,
          //title
          title1: {
            fontSize:adaptePX(14),
            text: "官方平台",
             fontcolor: "#333",
             left:"11%",
             top: "40%",
            show:true,
          },
          title2: {
            fontSize: 20,
            fontcolor: "#333",
            top: 10,
            show: false,
          },
          tanc: {
            show: true,
            title: "",
            url: "",
            parme: true,
          },
        },
      },
      sjzlfx2: {
        data: [
          {
            value: 222081,
            name: "完整信息数",
          },
          {
            value: 279915,
            name: "缺项信息数",
          },
        ],
        option: {
          id: "",
          gridX: 0,
          gridX2: 0,
          gridY: 0,
          gridY2: 0,
          colors: ["#5094F5", "#FFB253"],
          radius: ["58%", "72%"],
          center: ["20%", "50%"],
          nameFontSize:adaptePX(16),
          nameColor: "#333",
          labelShow: false,
          labelFormatter: "{b}\n{d}%",
          roseType: false,
          legend: true,
          legendShowValueColor: "#1492FF",
          // legendWidth:'80%',
          legendPositionLeft: "38%",
          legendPositionTop: "16%",
          legendOrient: "vertical",
          legendItemGap: 12,
          legendIcon: "rect",
          legendshowFh: true,
          // legendPositionBottom:'0%',
          legendShowPercent: true,
          legendShowValue: true,
          labelLineShow: true,
          labelLineLength: 20,
          labelLineLength2: 10,
          //title
          title1: {
            fontSize:adaptePX(14),
            text: "第三方平台",
              fontcolor: "#333",
             left:"9.9%",
             top: "40%",
            show: true,
          },
          title2: {
            fontSize: 20,
            fontcolor: "#333",
            top: 10,
            show: false,
          },
          tanc: {
            show: true,
            title: "",
            url: "",
            parme: true,
          },
        },
      },
      ahyxqhjchtphb: {
        data: {
          categories: [
            "金融业",
            "房地产业",
            "住宿和餐饮业",
            "信息技术服务业",
            "科学研究和技术服务业",
            "居民服务业",
            "建筑业",
            "批发和零售业",
            "租赁和商务服务业",
            "制造业",
          ],
          series: [
            {
              name: "新增",
              data: [506, 556, 818, 960, 1921, 1954, 2183, 3117, 9040, 11345],
            },
            {
              name: "解除",
              data: [4, 56, 49, 28, 1175, 389, 505, 125, 837, 953],
            },
          ],
        },
        option: {
          type: ["bar"],
          gridTop: 10,
          gridRight: "5",
          gridLeft: "12",
          gridBottom: "2",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          legendIcon:"circle",
          //title
          istl: false,
          stack: true,
          category: true,
          //x
          xNameColor: "#303030",
          xAxisLineShow: false,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          xAxisLabelShow: false,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: false,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 9,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#5094F5",
            },
            {
              color1: "#FFB253",
            },
          ],
        },
      },
      sjwzfx: {
        unit: "%",
        data: {
          categories: ["合同信息", "企业信息", "劳动者信息", "用工信息"],
          series: [
            {
              name: " ",
              data: [57.59, 80.64, 98.82, 6.26],
            },
          ],
        },
        option: {
          type: ["bar"],
          gridTop: 15,
          gridRight: "5",
          gridLeft: "4",
          gridBottom: "2",
          //legend
          legend: false,
          legendPositionTop: "top",
          legendPositionLeft: "20%",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 18,
          barRadius: "0",
          seriesLableShow: true,
         seriesLableFontSize:adaptePX(12),
          seriesLableColor: "#333",
          barColor: [
            {
              color1: "#FFB253",
            },
          ],
        },
      },
      dqsjwzl: {
        unit: "%",
        data: {
          categories: [
            "建德",
            "萧山",
            "临平",
            "拱墅",
            "淳安",
            "余杭",
            "上城",
            "西湖",
            "桐庐",
            "钱塘",
            "富阳",
            "滨江",
            "临安",
          ],
          series: [
            {
              name: "完整率",
              data: [
                63.34, 45.5, 45.12, 44.38, 44.34, 44.22, 44.2, 44.13, 42.86,
                42.67, 42.64, 41.83, 41.62,
              ],
            },
          ],
        },
        option: {
          type: ["bar"],
          gridTop: 15,
          gridRight: "5",
          gridLeft: "4",
          gridBottom: "2",
          //legend
          legend: false,
          legendPositionTop: "top",
          legendPositionLeft: "20%",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 12,
          barRadius: "0",
          seriesLableShow: true,
          seriesLableFontSize:adaptePX(12),
          seriesLableColor: "#333",
          barColor: [
            {
              color1: "#2380FF",
            },
          ],
        },
      },
      xzhjhtqs: {
        unit: "万人",
        data: {
          categories: [
            "202012",
            "202101",
            "202102",
            "202103",
            "202104",
            "202105",
          ],
          series: [
            {
              name: "解除",
              data: [973, 831, 318, 894, 4969, 8951],
            },
            {
              name: "新增",
              data: [5667, 12477, 7088, 19727, 41011, 25822],
            },
            {
              name: "去年同期解除",
              data: [9, 21, 29, 5, 5, 5],
            },
            {
              name: "去年同期新增",
              data: [682, 1113, 696, 986, 901, 824],
            },
          ],
        },
        option: {
          type: ["line"],
          gridTop: 21,
          gridRight: "5",
          gridLeft: "0",
          gridBottom: "0",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "2%",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: 20,
          xNameFontSize: adaptePX(14),
          xAxisName: "",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yName: "单位：万人",
          yNameFontSize: adaptePX(12),
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 16,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#2380FF",
            },
            {
              color1: "#FFA93F",
            },
            {
              color1: "#FFA93F",
            },
            {
              color1: "#2380FF",
            },
          ],
        },
      },
    };
  },
};
</script>
